 <template>
    <div class="category-wrapper">
        <ul>
            <ul>
                <li v-for="item in categorylist" :key="item.id">
                    <router-link :to="{ name: 'product', query: {category_id: item.id} }">
                        <img :src="constant.api_url + item.logo" :alt="item.title">
                        <span>{{item.title}}</span>
                    </router-link>
                </li>
                <li>
                    <router-link :to="{ name: 'product' }">
                        <img src="@/assets/images/cate_10.png" alt="更多">
                        <span>更多</span>
                    </router-link>
                </li>
            </ul>
        </ul>
    </div>
</template>

 <script type="text/ecmascript-6">
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";

export default {
  name: "",
  data() {
    return {
      categorylist: [],
      constant: constant
    };
  },
  components: {},
  created() {
    http.get(this, {
      url: "index/pcategorylist",
      dataType: "json",
      success: function(data) {
        console.log('首页分类:', data);
        if (data.status == 1) {
          this.categorylist = data.info;
        }
      }
    });
  }
};
</script>

 <style scoped lang="scss">
.category-wrapper {
  padding: 0.4rem 0.2rem;
  background-color: $c-white-light;

  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    li {
      width:20%;
     padding: 0 0.1rem;
      text-align: center;
      a{
          display:block;
          margin-bottom:0.2rem;
      }

      img {
            width:90%;
            height:auto;
          display: inline-block;
      }

      span {
        white-space: nowrap;
        display: inline-block;
        width: 100%;
        font-size: 0.22rem;
        color: $c-mainC;
        margin-top: 0.2rem;
      }
    }
  }
}
</style>
